<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <Breadcrumb title="内容管理123"/> -->
        <Breadcrumb>
          内容管理
        </Breadcrumb>
        <!-- 面包屑导航 -->
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb> -->
      </div>

      <!-- 表单区域 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <!-- 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部 -->
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- <status :value="form.status" @input="hInput"/> -->
        <!-- 语法糖 -->
        <status v-model="form.status"/>
        <channel v-model="form.channelId"/>

         <!--
            daterange: 表示一个日期的区域，有起点和终点。
              date日期，range:区域
            value-format：
              日期时间的格式。不指定则绑定值为 Date 对象
        -->
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="isLoading" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格部分
      el-table: data属性。用来提供表格的数据来源
      el-table-column
        - prop: 要对data中对象的某一个属性名对应。
        - label： 表头的标题
    -->
    <el-card style="margin-top: 20px">

      <div slot="header" class="clearfix">
        根据筛选条件查询到{{total_count}}条数据,当前是第{{curPage}}页：
      </div>

        <el-table
        :data="articles"
        v-loading="isLoading"
        style="width: 100%">
        <el-table-column label="封面">
          <!-- 对于自定义模板列
          1. 不需要设置prop
          2. slot-scope="scope" 用来指定在template中可以通过scope来获取当前行的信息
              scope.row: 表示当前行的数据
              scope.row.cover.images[0] 表示这一行中的封面的地址
          -->
          <template slot-scope="scope">
            <!-- lazy懒加载效果 https://element.eleme.cn/#/zh-CN/component/image#lan-jia-zai -->
            <!-- <span>{{ scope.row.cover.images[0] }}</span> -->
            <el-image
              style="width:150px;height:100px"
              lazy
              :src="scope.row.cover.images[0]"
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          >
        </el-table-column>

        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <!-- 0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除 -->
            <!-- {{scope.row.status}} -->
            <el-tag v-if="scope.row.status===0">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="pubdate"
          label="发布时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--
              scope.row:    表示这一行的数据
              scope.$index: 表示这一行的索引
            -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="hEdit(scope.$index, scope.row)">
            </el-button>

            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="hDelete(scope.$index, scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页
        1.total: 一共有多少条数据 默认情况，它会以每页10条进行计算总页数
        2. current-change事件。当点击页码时，它会触发并会传入当前的页码。
      -->
      <el-pagination
        v-show="total_count>10"
        :disabled="isLoading"
        style="margin-top: 10px"
        background
        layout="prev, pager, next"
        @current-change="hPageChange"
        :total="total_count">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Channel from '@/components/Channel.vue'
// import Breadcrumb from '@/components/Breadcrumb.vue'
import Status from './components/status.vue'
export default {
  name: 'articles',
  components: {
    Channel,
    // Breadcrumb,
    Status
  },
  data () {
    return {
      form: {
        date: '', // 表单筛选日期范围
        status: null, // 查询文章的状态，不传这个参数，就是全部(null)
        channelId: null // 查询频道编号
      },
      isLoading: false, // 是否正在加载
      articles: [], // 表格数据
      total_count: 0, // 表示当前查询得到的总条数
      curPage: 1 // 表示当前要查询页码
    }
  },
  created () {
    this.loadArticle()
  },
  methods: {
    // hInput (code) {
    //   console.log('从子组件status中传递的数据', code)
    //   this.form.status = code
    // },
    // 做查询
    async loadArticle () {
      console.log('做查询.....')

      // 组装查询条件
      // 1. 日期范围
      let beginPubdate = null
      let endPubdate = null

      // 2. 根据用户选中的日期进行赋值
      if (this.form.date) {
        beginPubdate = this.form.date[0]
        endPubdate = this.form.date[1]
      }

      const queryObj = {
        page: this.curPage,
        status: this.form.status,
        begin_pubdate: beginPubdate,
        end_pubdate: endPubdate,
        channel_id: this.form.channelId
      }
      // 对于axios来说，在哪里填充入参数：
      //  如果传的参数值是null，则axios会忽略这个参数：不向后端传递
      //  如果参数要放在请求体中的，则要写在 data
      //  如果参数要放在请求头中的(get)，则要写在 params
      //  如果明确说明参数要放在header中，则要写在headers

      this.isLoading = true
      try {
        const result = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/articles',
          params: queryObj
        })
        console.log(result)
        // 保存查询结果
        this.articles = result.data.data.results
        // 总条数
        this.total_count = result.data.data.total_count
        this.isLoading = false
      } catch (err) {
        console.log(err)
        this.$message.error('查询失败')
        this.articles = []
        this.total_count = 0
        this.isLoading = false
      }
    },
    onSubmit () {
      this.loadArticle()
      // console.log('submit!');
    },
    hEdit (index, row) {
      // 1. 获取id
      const idStr = row.id.toString()
      // 2. 跳转路由
      // 方式一： 传一个对象
      // this.$router.push({
      //   name: 'editArticle',
      //   params: {
      //     id: idStr
      //   }
      // })
      // 方式二：传一个字符串
      this.$router.push('/editArticle/' + idStr)
    },
    hDelete (index, row) {
      // 1. 做删除，弹窗提示用户确认
      this.$confirm('你确定要删除吗？')
        .then(async () => {
          // 用户点了确定
          // 2. 获取id，调用接口
          // 经过json-bigint处理之后，id就变成一个对象

          const idStr = row.id.toString()
          try {
            const result = await this.$http({
              url: '/mp/v1_0/articles/' + idStr,
              method: 'DELETE'
            })
            console.log(result)
            // 3. 根据接口的反馈信息做后续处理
            // 如果这个操作不报错误，则可以认为是删除成功，
            // 下面要更新页面，有两种方案
            // (1) 再做一次查询(更加严谨，数据是从后端再次求回来的)
            this.loadArticle()
            // (2) 不做查询，直接删除当前这一行数据(不做查询)
            // this.articles.splice(index, 1)
          } catch (err) {
            this.$message.error('删除失败，目前只能删除草稿！')
          }
        })
        .catch(() => {
          // 用户点了取消
        })
    },
    hPageChange (curPage) {
      // 根据当前页码 curPage，重发请求
      // 1. 更新页码
      this.curPage = curPage
      // 2. 重发请求
      this.loadArticle()
    }
  }
}
</script>

<style>

</style>
